<template>
  <div class="bar">
    <div class="list-y bar_list">
      <div class="bar_item"
           @click="handleClick(i.id)"
           v-for="i in data"
           :class="i.id===selectItem?'active':null"
           :key="i.id">{{ i.label }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import {ref} from "vue";

const selectItem = ref('0001')
const data = [{
  id: 1,
  label: "综艺"
},
  {
    id: 2,
    label: "热点"
  },
  {
    id: 3,
    label: "动漫"
  },
  {
    id: 4,
    label: "电影"
  }]
// 可变化导航栏
const handleClick = (index: string) => {
  selectItem.value = index

}


//
// window.addEventListener('click', handleClick);

</script>

<style lang="less" scoped>
.bar {
  margin-top: 5px;
  width: 100%;
  display: flex;
  align-items: center;
  height: 40px;

  .bar_list {
    width: 100%;
    height: 100%;
    align-content: center;
    display: flex;
    justify-content: space-around;
    overflow-x: auto;
    align-items: center;

    .bar_item {
      cursor: pointer;
    }

    .active {
      border-bottom-width: 4px;
      border-bottom-color: #7873f5;
      border-bottom-style: groove;
      transition: 0.5s;
    }

    .active:before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

  }
}
</style>